<template>
  <div
      style="width: 70%;background-color: #fdfdfd;margin: 0 auto;text-align: left;padding: 10px 20px;border-radius: 8px">
    <h3 style="margin: 25px 0;font-size: 24px">{{ job_data.position }}</h3>
    <el-row class="row-line">
      <el-col :span="8">职位分类：
        <el-tag
            size="small"
            effect="plain"
            type=""
            v-if="!edit"
        >
          {{ job_data.position_category }}
        </el-tag>
        <el-input
            class="input-new-tag"
            v-if="edit"
            v-model="job_data.position_category"
            ref="saveTagInput"
            size="small"
        ></el-input>
      </el-col>
      <el-col :span="8">工作地点：
        <el-tag
            v-if="!edit"
            size="small"
            effect="plain"
            type=""
        >
          {{ job_data.location }}
        </el-tag>
        <el-input
            class="input-new-tag"
            v-if="edit"
            v-model="job_data.location"
            ref="saveTagInput"
            size="small"
        ></el-input>
      </el-col>
      <el-col :span="8">招聘人数：
        <el-tag
            size="small"
            effect="plain"
            type="danger"
            v-if="!edit"
        >
          {{ job_data.count }}
        </el-tag>
        <el-input
            class="input-new-tag"
            v-if="edit"
            v-model="job_data.count"
            ref="saveTagInput"
            size="small"
            type="number"
        ></el-input>
      </el-col>
    </el-row>
    <div class="content">
      <h3 style="font-weight: bold;font-size: 16px;margin: 15px 0">工作职责:</h3>
      <div>
        <div v-show="!edit" v-html="job_data.gzzz" style="" class="show-content"></div>
        <div v-show="edit">
          <edit_panel style="" v-model="job_data.gzzz"></edit_panel>
        </div>
      </div>
      <h3 style="font-weight: bold;font-size: 16px;margin: 15px 0">职责要求:</h3>
      <div>
        <div v-show="!edit" v-html="job_data.zzyq" style="font-size: 14px;line-height: 1.5rem"></div>
        <div v-show="edit">
          <edit_panel style="" v-model="job_data.zzyq"></edit_panel>
        </div>
      </div>
    </div>
    <el-row>
      <el-col :span="20"></el-col>
      <el-col :span="2" v-if="!edit">
        <el-button type="primary" @click="change_status">编辑</el-button>
      </el-col>
      <el-col :span="2" v-if="edit">
        <el-button type="success" @click="change_status">保存</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="change_status">删除</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import edit_panel from "@/components/edit_panel";

export default {
  name: "view",
  data() {
    return {
      job_id: '',
      job_data: {},
      edit: false,
      edit_data: {}
    }
  },
  methods: {
    change_status() {
      this.edit = !this.edit
      this.hide_panel()
    },
    hide_panel() {
      let panels = document.querySelectorAll('.tox.tox-tinymce')
      for (let i = 0; i < panels.length; i++) {
        panels[i].style.display = this.edit ? '' : 'none'
      }
    }
  },
  mounted() {
    this.job_id = this.$route.params.job_id
    if (this.job_id)
      this.job_data = JSON.parse(this.$Base64.decode(this.$Base64.decode(this.$route.params.job_id)))
    else {
      1
    }
  },
  components: {
    edit_panel
  },
  created() {
    this.hide_panel()
  }
}
</script>

<style scoped>
.row-line {
  padding: 0 20px;
  margin: 10px 0;
  font-size: 14px;
}

.content {
  padding: 0 20px 15px;
}


.button-new-tag.el-button--small {
  padding: 0 10px;
  min-height: 24px;
}

.input-new-tag.el-input--small {
  width: 80px;
  vertical-align: bottom;
  line-height: 24px;
}

.input-new-tag.el-input--small >>> .el-input__inner {
  line-height: 24px;
  height: 24px;
  padding: 0 10px;
}
</style>
